<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算元素到屏幕的远点距离</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #div1 {
      margin: 0 auto;
      width: 980px;
      height: 1000px;
      background-color: aquamarine;
      border: 1px solid red;
    }

    #div2 {
      /* margin: 30px; */
      margin-top: 30px;
      /* padding: 100px; */
      width: 700px;
      height: 300px;
      background-color: beige;
    }

    #div3 {
      background-color: lightcoral;
      display: flex;
      justify-content: space-around;
    }

    #h01 {
      background-color: lightcyan;
    }

    #div4,
    #div5 {
      background-color: cadetblue;
      text-align: center;
      line-height: 100%;
    }
  </style>
</head>

<body>
  <div id="div1">
    <div id="div2">
      <h1 id="h01">坐标计算</h1>
    </div>
    <div id="div3">
      <div id="div4">
        <canvas id="canvas1"></canvas>
      </div>
      <div id="div5">
        <canvas id="canvas2"></canvas>
      </div>
    </div>
  </div>
  <script>

    // offsetTop
    let div1 = document.getElementById("div1");
    let div2 = document.getElementById("div2");
    let div3 = document.getElementById("div3");
    let div4 = document.getElementById("div4");
    let div5 = document.getElementById("div5");
    let h01 = document.getElementById("h01");

    //  offsetTop 元素边框外侧距离包含元素内侧的像素数
    console.log("div1.offsetTop: " + div1.offsetTop);
    console.log("div2.offsetTop: " + div2.offsetTop);
    console.log("div3.offsetTop: " + div3.offsetTop);
    console.log("div4.offsetTop: " + div4.offsetTop);
    console.log("div5.offsetTop: " + div5.offsetTop);
    console.log("h01.offsetTop: " + h01.offsetTop);

    // offsetLeft 元素边框外侧距离包含元素内侧的像素数
    console.log("div1.offsetLeft: " + div1.offsetLeft);
    console.log("div2.offsetLeft: " + div2.offsetLeft);
    console.log("div3.offsetLeft: " + div3.offsetLeft);
    console.log("div4.offsetLeft: " + div4.offsetLeft);
    console.log("div5.offsetLeft: " + div5.offsetLeft);
    console.log("h01.offsetLeft: " + h01.offsetLeft);

    // offsetParent
    console.log(div5.offsetParent.offsetTop);

  </script>
</body>
</html>